import {useState} from 'react'
function UseState(){

  let [title,setTitle]=  useState("hello");
  const [userInfo,setUserInfo]=useState({name:"张三",age:20});
  const [list,setList]=useState([{id:1,title:"北京"},{id:2,title:"上海"}])

  const updateUser=()=>{

    setUserInfo({...userInfo,name:"李四"});
    console.log(userInfo);
   
  }

  const del=(index)=>{

    return ()=>{

         
       setList(list.filter((item,ind)=>index!=ind));
         
    }

  }

  const update=(val)=>{

     return ()=>{
      
        setTitle(val)
      

     }
   
  
  }
 

    return (
        <div>
            <div>
                {userInfo.name}{userInfo.age}

                <button onClick={updateUser}>update</button>
                <ul>
                    {
                        list.map((item,index)=>(
                            <li key={item.id}>{item.title}
                            <button onClick={del(index)}>删除</button>
                            </li>

                        ))
                    }
                 
                </ul>
            </div>

            {title}
                  {/* <div>账号<input type="text" /></div>
                  <div>密码<input type="text" /></div>
                  <button>登录</button> */}

                  <button onClick={update(100)}>修改</button>
        </div>

    )
}
export default UseState;